import { useState } from "react"

interface AddTodoFormProps {
    onAdd: (title: string) => void;
}

export default function AddTodoForm({ onAdd }: AddTodoFormProps) {
    const [newTodo, setNewTodo] = useState("");

    const handleSubmit = (e: React.FormEvent<HTMLElement>) => {
        e.preventDefault();
        if (!newTodo.trim()) return;
        onAdd(newTodo.trim());
        setNewTodo("");
    };

    return (
        <form
            className="flex"
            onSubmit={handleSubmit}
        >
            <input
                type="text"
                value={newTodo}
                onChange={(e) => setNewTodo(e.target.value)}
                placeholder="Add a new todo"
                className="bg-white rounded-s-md grow border border-gray-400 p-2"
            />
            <button
                type="submit"
                className="w-16 bg-slate-900 rounded-e-md hover:bg-slate-700 text-white"
            >
                Add
            </button>
        </form>
    )
}
